<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			[v-cloak] {
				display: none;
			}
			.no1 {
				width: 600px;
				border: 1px solid #CCCCCC;
				margin: 50px auto;
				min-height: 100px;
			}
			
			.title {
				overflow: hidden;
				height: 50px;
				border-bottom: 1px solid #CCCCCC;
			}
			
			.title>div {
				float: left;
				line-height: 50px;
				padding: 0 10px;
			}
			
			.content {
				line-height: 40px;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
			}
			
			.no1-leave,
			.no1-enter-to {
				left: 0;
				opacity: 1;
			}
			
			.no1-leave-active,
			.no1-enter-active {
				transition: all .3s;
			}
			
			.no1-leave-to {
				left: -200px;
				opacity: 0;
			}
			
			.no1-enter {
				left: 200px;
				opacity: 0;
			}
			
			.no2-leave,
			.no2-enter-to {
				left: 0;
				opacity: 1;
			}
			
			.no2-leave-active,
			.no2-enter-active {
				transition: all .3s;
			}
			
			.no2-leave-to {
				left: 200px;
				opacity: 0;
			}
			
			.no2-enter {
				left: -200px;
				opacity: 0;
			}
		</style>
	</head>

	<body>
		<div id="box" v-cloak="" style="overflow: hidden;">
			<div class="no1">
				<div class="title">
					<div v-for="(i,$index) in arr" @click="btn($index)" :style="{color:index==$index?'red':''}">
						{{i.title}}
					</div>
				</div>
				<div :style="{position: 'relative',height:arr[index].arr.length*40+'px'}" class="text">
					<transition v-for="(i,$index) in arr" :name="transitionName">
						<div class="content" v-show="index==$index">
							<p v-for="a in i.arr">{{a.title}}</p>
						</div>
					</transition>
				</div>
			</div>
		</div>
	</body>
	<script src="../js/vue.js"></script>
	<script>
		//		<!--如果点击的值在当前值右边走动画no1-->
		//		<!--如果点击的值在当前值左边走动画no2-->
		new Vue({
			el: "#box",
			methods: {
				btn($index) {
					if($index > this.index) {
						//右边
						this.transitionName = 'no1'
					} else {
                        //左边
                        this.transitionName = 'no2'
					}
					this.index = $index
				}
			},
			data: {
				index: 0,
				transitionName: 'no1',
				arr: [{
					title: '标题一',
					arr: [{
						title: '子标题1'
					}, {
						title: '子标题1'
					}, {
						title: '子标题1'
					}, {
						title: '子标题1'
					}]
				}, {
					title: '标题二',
					arr: [{
						title: '子标题2'
					}, {
						title: '子标题2'
					}, {
						title: '子标题2'
					}, {
						title: '子标题2'
					}, {
						title: '子标题2'
					}, {
						title: '子标题2'
					}]
				}, {
					title: '标题三',
					arr: [{
						title: '子标题3'
					}, {
						title: '子标题3'
					}, {
						title: '子标题3'
					}]
				}, ]
			}
		})
	</script>

</html>